<!-- 5S整改回复详情 -->
<template>
	<view class="content">
		<u-navbar :fixed="false" title="5S整改详情" :autoBack="true" :safeAreaInsetTop="true" leftIconColor="#fff">
			<view slot="right">
				<uni-icons v-if="formData.Status!=1" type="plusempty" size="22" color="#fff"
					@click="showReplyPop"></uni-icons>
			</view>
		</u-navbar>

		<scroll-view class="srv" :scroll-y="true">
			<view class="cardBox">
				<view class="title">
					<text>问题详情</text>
				</view>
				<view class="form-row">
					<text class="form-label">检查明细:</text>
					<text class="form-input">{{formData.ItemName}}</text>
				</view>
				<view class="form-row">
					<text class="form-label">本项扣分:</text>
					<text class="form-input">{{formData.Score}}</text>
				</view>
				<view class="form-row">
					<text class="form-label">责任人员:</text>
					<text class="form-input">{{formData.ToUserName}}</text>
				</view>
				<view class="form-row">
					<text class="form-label">问题描述:</text>
					<text class="form-input">{{formData.Description}}</text>
				</view>
				<view class="form-row">
					<text class="form-label">现场照片:</text>
					<view class="form-input">
						<view class="image-container">
							<image v-for="(img,imgIdx) in formData.DDImgs" :src="img" :key="imgIdx" mode="aspectFill"
								class="image-item" @click="previewImage(img)"></image>
						</view>
					</view>
				</view>
				<view class="form-row">
					<text class="form-label">上报时间:</text>
					<text class="form-input">{{formData.CreateTime}}</text>
				</view>
			</view>

			<view v-if="formData.Status==1" class="cardBox">
				<view class="title">
					<text>问题整改</text>
				</view>
				<view class="form-row">
					<text class="form-label">回复描述:</text>
					<text class="form-input">{{formData.FeedBack}}</text>
				</view>
				<view class="form-row">
					<text class="form-label">现场照片:</text>
					<view class="form-input">
						<view class="image-container">
							<image v-for="(img,imgIdx) in formData.FFImgs" :src="img" :key="imgIdx" mode="aspectFill"
								class="image-item" @click="previewImage(img)"></image>
						</view>
					</view>
				</view>
				<view class="form-row">
					<text class="form-label">整改完成:</text>
					<text class="form-input">{{formData.Status==1 ? '已完成' : '未完成'}}</text>
				</view>
				<view v-if="formData.Status==1" class="form-row">
					<text class="form-label">完成时间:</text>
					<text class="form-input">{{formData.FinishTime}}</text>
				</view>
			</view>
		</scroll-view>

		<u-popup :show="showReply" @close="closeReplyPop">
			<view :style="$utils.disposeSafeBottomFun()">
				<u--form labelPosition="left" :model="replyData" labelWidth="100" :rules="rules" ref="uForm">
					<u-form-item label="反馈描述" prop="FeedBack" borderBottom required>
						<u--textarea v-model="replyData.FeedBack" :count="true" :autoHeight="true" border="bottom"
							:maxlength="500" placeholder="请输入反馈描述"></u--textarea>
					</u-form-item>
					<u-form-item label="现场照片" prop="FImgs" labelPosition="top" borderBottom required>
						<view style="padding-top: 10px;">
							<u-upload :fileList="FImgs" @afterRead="afterRead" @delete="deletePic" multiple
								:maxCount="9" :previewFullImage="true"></u-upload>
						</view>
					</u-form-item>
				</u--form>
				<view
					style="display: flex;align-items: center;justify-content: space-between;padding: 10px;column-gap: 20px;">
					<u-button type="info" color="#51d0d0" :plain="true" text="取消" @click="cancelReply"></u-button>
					<u-button type="primary" color="#51d0d0" text="确认" @click="submitReply"></u-button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showReply: false,
				IsSerious: 0,
				formData: {
					DailyFSDeID: 0,
					Score: 0,
					ToUserID: 0,
					ToUserName: '',
					Description: '',
					DImgs: ''
				}, // 表单内容
				replyData: {
					FSDealID: 0,
					FImgs: '',
					FeedBack: ''
				}, // 回复内容
				DImgs: [],
				FImgs: [],
				rules: {
					'FeedBack': {
						type: 'string',
						required: true,
						message: '请填写反馈描述',
						trigger: ['blur', 'change']
					},
					'FImgs': {
						type: 'string',
						required: true,
						message: '请上传现场照片',
						trigger: ['blur', 'change']
					}
				} // 表单验证规则
			}
		},
		created() {

		},
		mounted() {

		},
		methods: {

			showReplyPop() {
				this.showReply = true;
			},

			closeReplyPop() {
				this.showReply = false;
			},

			submitReply() {
				let that = this;
				if (that.FImgs.length) {
					that.replyData.FImgs = that.FImgs.map(item => item.url).join(',');
				}
				that.$utils.showLoading();
				that.$refs.uForm.validate().then(res => {
					that.Request.request('5S_FeedBack', that.replyData, function(data) {
							that.$utils.hideLoading();
							that.showReply = false;
							that.getPageData(that.replyData.FSDealID);
						}, function(err) {

						}, that.Request.IPAgreement() + that.Request.serverIP() +
						'/Frame/SqlData', 1)
				}).catch(errors => {
					uni.$u.toast('校验失败')
				})

			},

			cancelReply() {
				this.showReply = false;
			},

			// 删除图片
			deletePic(event) {
				this.FImgs.splice(event.index, 1);
			},

			// 新增图片
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this.FImgs.length;
				lists.map((item) => {
					this.FImgs.push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})

				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this.FImgs[fileListLen]
					this.FImgs.splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
			},

			uploadFilePromise(url) {
				let that = this;
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: 'http://' + that.Request
							.serverIP() + '/Frame/uploadFile?dirName=' + '5S图片',
						filePath: url,
						name: 'file',
						header: {
							'Content-Type': 'multipart/form-data' // 必须设置
						},
						formData: {
							user: 'test'
						},
						success: (uploadFileRes) => {
							const data = JSON.parse(uploadFileRes.data);
							resolve(data.data)
						}
					});
				})
			},

			previewImage(img) {
				uni.previewImage({
					urls: [img]
				})
			},

			getPageData(id) {
				let that = this;
				that.$utils.showLoading();
				that.Request.request('5S_getFeedBackByID', {
						FSDealID: id
					}, function(data) {
						that.$utils.hideLoading();

						let result = data.data.ds.map(item => {
							let dimgs = [];
							let fimgs = [];
							if (item.DImgs) {
								dimgs = item.DImgs.split(',');
							}
							if (item.FImgs) {
								fimgs = item.FImgs.split(',');
							}
							if (dimgs.length) {
								dimgs = dimgs.map(img => (that.Request.IPAgreement() + that.Request
									.serverIP() + img));
							}
							if (fimgs.length) {
								fimgs = fimgs.map(img => (that.Request.IPAgreement() + that.Request
									.serverIP() + img));
							}
							return {
								...item,
								DDImgs: dimgs,
								FFImgs: fimgs
							}
						})

						if (result.length) {
							that.formData = result[0];
						}
						// console.log(that.formData);
					}, function(err) {

					}, that.Request.IPAgreement() + that.Request.serverIP() +
					'/Frame/SqlData', 1)
			}
		},

		onLoad(option) {
			if (option.FSDealID) {
				this.getPageData(option.FSDealID);
				this.replyData.FSDealID = option.FSDealID;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.u-form {
		.u-form-item {
			background-color: #fff;
			padding: 0 16px;
		}
	}

	.content {
		display: flex;
		flex-direction: column;
		height: 100vh;
		background-color: #f2f2f2;

		.srv {
			display: flex;
			flex-direction: column;
			height: calc(100vh - (44px + env(safe-area-inset-top) + env(safe-area-inset-bottom) / 2));
			padding: 10px;

			.cardBox {
				display: flex;
				flex-direction: column;
				border-radius: 5px;
				background-color: #ffffff;
				margin-bottom: 10px;
				padding: 10px;

				.title {
					display: flex;
					justify-content: center;
					align-items: center;
					border-bottom: 1px solid #ddd;
					padding-bottom: 10px;
					font-size: 600;
					color: #232333;
				}

				.form-row {
					display: flex;
					align-items: center;
					padding: 10px 0;
					border-bottom: 1rpx solid #ddd;
				}

				.form-require {
					width: 10px;
					color: #FF0000;
				}

				.form-label {
					width: 100px;
					color: #333;
					font-size: 14px;
				}

				.form-input {
					flex: 1;
					padding: 0 5px;
					border: none;
					background-color: transparent;
					font-size: 14px;
				}
			}

		}

		.image-container {
			display: flex;
			flex-wrap: wrap;
			gap: 10px;
			padding: 10px 10px 10px 0;
		}

		.image-item {
			width: 66px;
			height: 66px;
			border-radius: 5px;
			object-fit: cover;
		}
	}
</style>